<template>
  <!-- client框架组件 -->
  <div class="content" ref="mprBoxRef">
    <div class="mpr-wrapper">
      <mpr
        :style="axialImageWrapper"
        ref="axialBoxRef"
        :corner-info="cornerInfo"
        :boxIdx="0"
        :is-crosshair-visible="isCrosshairVisible"
      ></mpr
      ><!--横断面-->
    </div>
    <div class="mpr-wrapper">
      <mpr
        :style="sagittalImageWrapper"
        ref="sagittalBoxRef"
        :corner-info="cornerInfo"
        :boxIdx="1"
        :is-crosshair-visible="isCrosshairVisible"
      ></mpr
      ><!--冠状面-->
      <mpr
        :style="coronalImageWrapper"
        ref="coronalBoxRef"
        :corner-info="cornerInfo"
        :boxIdx="2"
        :is-crosshair-visible="isCrosshairVisible"
      ></mpr
      ><!--矢状面-->
    </div>
  </div>
  <a-modal
    :visible="isSaveVisible"
    title="提示"
    :width="502"
    :mask-closable="false"
    :modal-class="'save-lesion-modal'"
    :footer="false"
    @cancel="handleCancelSave"
  >
    <div class="sumbit-body">
      <i class="iconfont icon-bingzaotishi"></i>
      <span>是否保存对“当前病灶”的更改？</span>
    </div>
    <div class="bottom-btn">
      <a-button @click="handleCancelSave">取消</a-button>
      <a-button @click="handleCancelSave">不保存</a-button>
      <a-button @click="handleUpdateMaskAnnoData">保存</a-button>
    </div>
  </a-modal>
</template>

<script lang="ts">
// @ts-nocheck
import { default as _get } from "lodash/get";
import Mpr from "./mpr.vue";
import * as cornerstone from "cornerstone-core";
import cornerstoneTools from "cornerstone-tools";
import "./cornerstone-side-image-loader";
import "@/utils/initCornerstone.js"
import { synchronizer, wwwcSynchronizer } from "./config";
import { updateMaskAnnoData, getSeriesData } from "@/api/readPathology/readPathology";
import type * as StoreType from "@/store/modules/toolBar/type";
import type * as LesionType from "@/store/modules/filmReadLeft/type";
import SyncBrushTool from "./SyncBrushTool";
import { getImagePoint } from "./SyncBrushTool/utils/pointArray";
import { Rectangle_colormap } from "@/utils/colorMap";
import { useToolBar, useFilmRead } from "@/store";
import useUtils from "@/views/filmRead/hooks/useUtils";
import Bus from "@/utils/bus";
import { isEmpty } from "lodash";
import useLeft from "@/views/filmRead/hooks/useLeft";
import useHeader from "@/views/filmRead/hooks/useHeader";
import { ElMessage } from "element-plus";
import bus from "@/views/videoLabel/tools/bus";

const toolBar = useToolBar();
const filmRead = useFilmRead();
const LeftHooks = useLeft();

const { getToolState } = cornerstoneTools;
cornerstoneSideImageLoader.external.cornerstone = cornerstone;
const { configuration: segConfig, getters, setters, state } = cornerstoneTools.getModule(
  "segmentation"
);

// 不用wadouri影响十字线显示
/*const imageIds = Array(300)
  .fill("")
  .map((i, idx) => {
    return `wadouri:${window.location.origin}/new/${(idx + 1 + "").padStart(6, "0")}.dcm`;
  });*/

export default {
  components: {
    Mpr,
  },
  props: {},
  provide() {
    return {
      mprViewer: this,
      xyz: this.xyz
    };
  },
  data() {
    return {
      imageIds: [],//dcm数据
      cornerInfo: {}, // 四角标
      isFull: false, // 是否是全屏展示
      isCrosshairVisible: false, // 是否展示十字线
      isSaveVisible: false,
      crossLayer: 1, // 涂抹时默认跨几层呢
      isShowAllLesion: true, // 默认是否展示所有病灶
      // selectedNidusId: '',//选中的病灶id
      xyz:{
        x: 0, y: 0, z: 0
      },//三维像素坐标
      axialImageWrapper: {},
      sagittalImageWrapper: {},
      coronalImageWrapper: {},
      axialBox: {},
      sagittalBox: {},
      coronalBox: {},
      nodeMaskAdded: false, //防止重复加载
      cuboidMaskAdded: false, //
      sagittalImageIds: [],
      coronalImageIds: [],
      axialImageIds: [],
    };
  },
  computed: {
    allLesionResult() {
      // 左侧所有病灶列表
      const FilmRead = useFilmRead();
      let map = {};
      for (let key in FilmRead.dictionaryData.lesionDataList) {
        map[key] = {
          ...FilmRead.dictionaryData.lesionDataList[key],
          ...FilmRead.dictionaryData.imageDataList[key],
          lesion: FilmRead.dictionaryData.lesionDataList[key].code,
        };
      }
      return Object.values(map);
    },
    mprBoxs() {
      return [
        this.$refs.axialBoxRef,
        this.$refs.sagittalBoxRef,
        this.$refs.coronalBoxRef,
      ];
    },
    selectedNidusId() {
      return LeftHooks.leftHooksData.currentIndex;
    },
    isCreate() {
      return this.$route.query.type === "create";
    },
    isQuery() {
      return this.$route.query.type === "query";
    },
    isUpdate() {
      return this.$route.query.type === "update";
    },
  },
  watch: {
    selectedNidusId(val) {
      if (val === "") {
        cornerstoneTools.setToolPassiveForElement(this.axialBox.element, "SyncBrush");
      }
    },
    /*allLesionResult() {
      setTimeout(() => {
        this.initNodesMask();
        this.initCuboidMask();
        console.log('watch init node mask');
      }, 100);
    },*/
  },
  async created() {
    this.offBusEvent()
    Bus.on("toolBarClick", this.handleToolBarClick);
    Bus.on("lesionClick", this.handleLesionClick);
    const { lesionEvent, seriesEvent } = useUtils();
    const HeaderHooks = useHeader();
    if (filmRead.interfaceData.pageSettingList.defaultWindow) {
      HeaderHooks.headerHooksData.selectedCtWindow =
        filmRead.interfaceData.pageSettingList.defaultWindow;
    }
    this.lesionEvent = lesionEvent;
    this.seriesEvent = seriesEvent;
  },
  async mounted() {
    // window.onbeforeunload = this.handleUpdateMaskAnnoData
    toolBar.currentItem = 1; // 默认选中调窗工具
    this.axialBox = this.$refs.axialBoxRef || {};
    this.sagittalBox = this.$refs.sagittalBoxRef || {};
    this.coronalBox = this.$refs.coronalBoxRef || {};
    //
    const seriesInstanceUID = filmRead.interfaceData.resultDataList.seriesUid
    
    const res = await getSeriesData({ seriesUids: [seriesInstanceUID]})
    const  imageList  = res.data && res.data[seriesInstanceUID]
    imageList.forEach(item => {
      this.imageIds.push(`wadouri:${item.urlWan}`)
    })
    await this.initMpr();
    this.setDefaultInfo();
  },
  methods: {
    boxFull(boxId, isFull) {
      const imageStyle = isFull ? { width: "100%", height: "100%" } : {}; // { width: `${clientWidth}px`, height: `${clientHeight}px` }
      switch (boxId) {
        case 0:
          this.axialImageWrapper = imageStyle;
          break;
        case 1:
          this.sagittalImageWrapper = imageStyle;
          break;
        case 2:
          this.coronalImageWrapper = imageStyle;
          break;
        default:
          break;
      }
    },
    handleCancelSave() {
      this.isSaveVisible = false;
    },
    handleCtWindowChange(ctWindow) {
      const { axialBox, sagittalBox, coronalBox } = this;
      const [currentWl, currentWw] = ctWindow
        ? ctWindow.split("*")
        : [this.defaultWl, this.defaultWw];
      axialBox.setWL(currentWl, currentWw);
      sagittalBox.setWL(currentWl, currentWw);
      coronalBox.setWL(currentWl, currentWw);
    },
    setBrushToolActive(isEraser) {
      segConfig.alwaysEraseOnClick = isEraser;
      cornerstoneTools.setToolActiveForElement(this.axialBox.element, "SyncBrush", {
        isTouchActive: true,
        mouseButtonMask: 1,
      });
    },
    async handleToolBarClick(item) {
      console.log(item, "工具点击");
      if (item.isSave) {
        this.isSaveVisible = true;
        return false;
      }
      const {
        currentItem: { id, name, code, type, toolType, isVisible, isActive },
        ctWlww,
        lesion,
        toolType: optType,
        value,
        radius,
        layers,
      } = item;
      const { axialBox, sagittalBox, coronalBox, mprBoxs } = this;
      switch (code) {
        case "windowAdjustment":
          if (ctWlww) {
            this.handleCtWindowChange(ctWlww);
          } else {
            //调窗
            cornerstoneTools.setToolActive("Wwwc", {
              mouseButtonMask: 1,
              synchronizationContext: wwwcSynchronizer,
            });
          }
          break;
        case "FREEHAND_DAUBER":
          if (isActive) {
            if (!isEmpty(lesion)) {
              //选中病灶
              this.lesionCode = lesion.lesion;
              this.setBrushToolActive(false);
              setters.radius(radius);
              this.crossLayer = layers;
              SyncBrushTool.crossLayer = layers;
            } else if (optType === "brushRadius") {
              //修改半径
              setters.radius(radius);
            } else if (optType === "brushLayer") {
              //修改层数
              this.crossLayer = layers;
              SyncBrushTool.crossLayer = layers;
            } else {
              if (LeftHooks.leftHooksData.currentIndex !== "") {
                //展开并且有选中时为修改当前
                // this.lesionCode = lesion.lesion
                this.setBrushToolActive(false);
                setters.radius(radius);
                this.crossLayer = layers;
                SyncBrushTool.crossLayer = layers;
              } else {
                cornerstoneTools.setToolDisabledForElement(axialBox.element, "SyncBrush");
                //恢复默认
                cornerstoneTools.setToolActive("Wwwc", {
                  mouseButtonMask: 1,
                  synchronizationContext: wwwcSynchronizer,
                });
              }
            }
            const customParams = {
              arId: filmRead.interfaceData.seriesList[filmRead.currentThumbnailIndex].id,
              lesion: this.lesionCode,
              tool: toolType,
              // layerStart: axialBox.currentIm,
              // layerEnd: SyncBrushTool.endLayer
            };
            segConfig.customParams = customParams;
            segConfig.imageCompList = lesion.imageCompList;
          } else {
            //反选画笔
            cornerstoneTools.setToolDisabledForElement(axialBox.element, "SyncBrush");
            //恢复默认
            cornerstoneTools.setToolActive("Wwwc", {
              mouseButtonMask: 1,
              synchronizationContext: wwwcSynchronizer,
            });
          }
          break;
        case "eraser":
          // cornerstoneTools.setToolDisabled("Wwwc", { mouseButtonMask: 1 });
          // cornerstoneTools.setToolDisabled("Zoom", { mouseButtonMask: 1 });
          setters.radius(radius);
          this.crossLayer = layers;
          SyncBrushTool.crossLayer = layers;
          if (optType === "eraserRadius") {
            setters.radius(radius);
          } else if (optType === "eraserLayer") {
            this.crossLayer = layers;
            SyncBrushTool.crossLayer = layers;
          }
          if(isActive){
            this.setBrushToolActive(true)
          }else{
            //恢复调窗
            cornerstoneTools.setToolActive("Wwwc", {
              mouseButtonMask: 1,
              synchronizationContext: wwwcSynchronizer,
            });
          }
          break;
        case "CUBOID":
          if(!isEmpty(lesion)){
            this.cuboidParam = {
              arId: filmRead.interfaceData.seriesList[filmRead.currentThumbnailIndex].id,
              lesion: lesion.lesion,
              tool: toolType,
              color: "",
            };
            this.imageCompList = lesion.imageCompList;
            //todo 指定颜色、画完后禁用工具但是可以编辑
            const { configuration: rectConfig } = cornerstoneTools.getModule("Rectangle");
            rectConfig.color = "rgba(255,255,0,1)"; //任意指定颜色,alpha=0时边框不显示
            cornerstoneTools.setToolActiveForElement(axialBox.element, "Rectangle", {
              mouseButtonMask: 1,
            });
          }else{//反选
            //恢复默认
            cornerstoneTools.setToolActive("Wwwc", {
              mouseButtonMask: 1,
              synchronizationContext: wwwcSynchronizer,
            });
          }
          break;
        case "zoom":
          if(isVisible){
            cornerstoneTools.setToolActive("Zoom", { mouseButtonMask: 1 });
          }else{//反选
            //恢复默认
            cornerstoneTools.setToolActive("Wwwc", {
              mouseButtonMask: 1,
              synchronizationContext: wwwcSynchronizer,
            });
          }
          break;
        case "move":
          if(isActive){
            cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 1 });
          } else {//反选
            //恢复默认
            cornerstoneTools.setToolActive("Wwwc", {
              mouseButtonMask: 1,
              synchronizationContext: wwwcSynchronizer,
            });
          }
          break;
        case "crossHair":
          this.isCrosshairVisible = !this.isCrosshairVisible;
          if (this.isCrosshairVisible) {
            cornerstoneTools.setToolActive("Crosshairs", {
              mouseButtonMask: 2,
              synchronizationContext: synchronizer,
            });
            cornerstoneTools.setToolEnabled("ReferenceLines", {
              synchronizationContext: synchronizer,
            });
          } else {
            cornerstoneTools.setToolDisabled("Crosshairs", {
              mouseButtonMask: 2,
              synchronizationContext: synchronizer,
            });
            cornerstoneTools.setToolDisabled("ReferenceLines", {
              synchronizationContext: synchronizer,
            });
            //恢复右键pan
            cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 2 });
          }
          break;
        case "transparency":
          if (value) {
            segConfig.fillAlpha = value / 100.0;
            segConfig.fillAlphaInactive = value / 100.0;
            mprBoxs.map((item) => {
              item.updateImage();
            });
          }
          break;
        case "reset":
          axialBox.reset();
          sagittalBox.reset();
          coronalBox.reset();
          this.handleCtWindowChange();
          break;
        case "cornerInfo":
          axialBox.isCornerInfo = isActive;
          sagittalBox.isCornerInfo = isActive;
          coronalBox.isCornerInfo = isActive;
          break;
      }
    },
    async handleLesionClick(item: LesionType.FilmReadLeft) {
      const { type, isShowAll, currentItem, id } = item;
      const { axialBox, sagittalBox, coronalBox, mprBoxs } = this;
      if (type === "all") {
        this.isShowAllLesion = isShowAll;
        //自由画笔全部显示、隐藏
        this.allLesionResult.forEach((it, index) => {
          const { id, tool } = it;
          if (tool === "FREEHAND_DAUBER") {
            const tempIndex = this.getLabelmapIndexById(id); //index + 1
            const isSegmentVisible = getters.isSegmentVisible(
              this.axialBox.element,
              tempIndex,
              tempIndex - 1
            );
            if (isShowAll) {
              //反选的逻辑
              !isSegmentVisible && this.toggleSegmentVisibility(tempIndex, tempIndex - 1);
              this.activeEmptyLabelmap();
            } else {
              isSegmentVisible && this.toggleSegmentVisibility(tempIndex, tempIndex - 1);
            }
          }
        });
        //长方体全部
        this.setOneCuboidVisible(null, isShowAll, "Rectangle");
      } else if (currentItem === null && id === "") {
        //反选自由画笔
        this.activeEmptyLabelmap();
        //恢复调窗
        cornerstoneTools.setToolActive("Wwwc", {
          mouseButtonMask: 1,
          synchronizationContext: wwwcSynchronizer,
        });
      } else {
        //选中 or 反选
        const {
          type,
          currentItem: { tool },
        } = item;
        if (tool === "FREEHAND_DAUBER") {
          await this.handleSegmentClick(item);
        } else if (tool === "CUBOID") {
          await this.handleCuboidClick(item);
        }
      }
      mprBoxs.map((it) => it.updateImage());
    },
    async handleSegmentClick(item: LesionType.FilmReadLeft) {
      const {
        id: lesionId,
        type,
        isShowAll,
        isLesion,
        isEyes,
        currentItem: { result },
      } = item;
      const HeaderHooks = useHeader();
      //const targetIndex = this.allLesionResult.findIndex(({ id }) => id === lesionId)
      const segmentIndex = this.getLabelmapIndexById(lesionId);
      const { axialBox, sagittalBox, coronalBox, mprBoxs } = this;
      if (type === "lesion") {
        //切换病灶先保存前一个
        if (
          SyncBrushTool.thePreviousLesion.type === "FREEHAND_DAUBER" &&
          SyncBrushTool.thePreviousLesion.id !== lesionId &&
          !SyncBrushTool.thePreviousLesion.isSave
        ) {
          await this.handleUpdateMaskAnnoData(SyncBrushTool.thePreviousLesion.id);
          SyncBrushTool.thePreviousLesion.id = lesionId;
          SyncBrushTool.thePreviousLesion.isSave = true;
        }else if(SyncBrushTool.thePreviousLesion.type === "CUBOID" && SyncBrushTool.thePreviousLesion.id !== lesionId){//前一个是长方体，需要失焦
          this.selectOneCuboid(SyncBrushTool.thePreviousLesion.id, false, "Rectangle");
        }
        if (isLesion === "") {
          //反选
          this.activeEmptyLabelmap();
          //调窗
          cornerstoneTools.setToolActive("Wwwc", {
            mouseButtonMask: 1,
            synchronizationContext: wwwcSynchronizer,
          });
        } else {
          SyncBrushTool.thePreviousLesion.id = lesionId;
          SyncBrushTool.thePreviousLesion.isSave = true;
          SyncBrushTool.thePreviousLesion.type = "FREEHAND_DAUBER";
          //
          mprBoxs.map((it) => {
            setters.activeLabelmapIndex(it.element, segmentIndex - 1);
            setters.activeSegmentIndex(it.element, segmentIndex);
          });
          //开启 todo 橡皮擦取消后切换病灶还是橡皮擦模式
          // console.log('HeaderHooks.headerHooksData',HeaderHooks.headerHooksData)
          this.setBrushToolActive(segConfig.alwaysEraseOnClick)
        }

        if (!result) return false;
        const nidusMaskList = typeof result === "string" ? JSON.parse(result) : result;
        nidusMaskList.sort(({ layer: layer1 }, { layer: layer2 }) => layer1 - layer2);
        const { layer: midLayer, result: pixelData } = nidusMaskList[
          Math.floor(nidusMaskList.length / 2)
        ];
        const pixelArr =
          typeof pixelData === "string" ? JSON.parse(pixelData) : pixelData;
        const pp = getImagePoint(
          pixelArr[Math.floor(pixelArr.length / 2)],
          this.sagittalImageIds.length
        );
        // 十字线对齐
        axialBox.scrollToIndex(midLayer);
        sagittalBox.scrollToIndex(Math.floor(this.sagittalImageIds.length - pp.x));
        coronalBox.scrollToIndex(Math.floor(pp.y));
      } else {
        if (type === "eyes") {
          const isSegmentVisible = getters.isSegmentVisible(
            axialBox.element,
            segmentIndex,
            segmentIndex - 1
          );
          if (isEyes) {
            !isSegmentVisible &&
              this.toggleSegmentVisibility(segmentIndex, segmentIndex - 1);
          } else {
            isSegmentVisible &&
              this.toggleSegmentVisibility(segmentIndex, segmentIndex - 1);
          }
        } else if (type === "del") {
          mprBoxs.map((item) => {
            // setters.deleteSegment(item.element, segmentIndex, segmentIndex -1)
            //del 3d
            const { labelmaps3D } = getters.labelmaps3D(item.element);
            // labelmaps3D.splice(segmentIndex -1, 1)
            labelmaps3D[segmentIndex - 1].labelmaps2D = [];
          });
          // LeftHooks.leftHooksData.currentIndex = ''
          this.lesionEvent.lesionDel(lesionId);
          //反选的逻辑
          this.activeEmptyLabelmap();
        }
      }
      // axialBox.updateImage()
    },
    async handleCuboidClick(item: LesionType.FilmReadLeft) {
      const { id: lesionId, type, isShowAll, isLesion, isEyes, currentItem } = item;
      const { axialBox, sagittalBox, coronalBox, mprBoxs } = this;
      if (type === "lesion") {
        //如果前一个是自由画笔，切换病灶先保存；长方体修改后就保存
        if (
          SyncBrushTool.thePreviousLesion.type === "FREEHAND_DAUBER" &&
          SyncBrushTool.thePreviousLesion.id !== lesionId
        ) {
          if(!SyncBrushTool.thePreviousLesion.isSave){
            await this.handleUpdateMaskAnnoData(SyncBrushTool.thePreviousLesion.id);
            SyncBrushTool.thePreviousLesion.id = lesionId;
            SyncBrushTool.thePreviousLesion.isSave = true;
          }
          //反选
          this.activeEmptyLabelmap();
          //todo 关闭涂抹,会导致鼠标指针消失
          // cornerstoneTools.setToolDisabledForElement(axialBox.element, "SyncBrush");
        }
        if (isLesion === "") {
          //反选
          this.selectOneCuboid(lesionId, false, "Rectangle");
          //调窗
          cornerstoneTools.setToolActive("Wwwc", {
            mouseButtonMask: 1,
            synchronizationContext: wwwcSynchronizer,
          });
        } else {
          this.selectOneCuboid(lesionId, true, "Rectangle");
          if (this.isQuery) {
            //查看不可编辑
            cornerstoneTools.setToolEnabled("Rectangle");
          } else {
            //选中可编辑
            cornerstoneTools.setToolPassive("Rectangle", {
              mouseButtonMask: 1,
            });
          }
          SyncBrushTool.thePreviousLesion.id = lesionId;
          SyncBrushTool.thePreviousLesion.isSave = true;
          SyncBrushTool.thePreviousLesion.type = "CUBOID";
        }
        const { result } = currentItem;
        if (!result) return false;
        const {
          data: { point1, point2 },
        } = result;
        this.scrollToMid(point1, point2);
      } else {
        if (type === "eyes") {
          this.setOneCuboidVisible(lesionId, isEyes, "Rectangle");
        } else if (type === "del") {
          //del 3d
          this.removeOneCuboid(lesionId, "Rectangle");
          // LeftHooks.leftHooksData.currentIndex = ''
          this.lesionEvent.lesionDel(lesionId);
          //反选的逻辑
          // this.activeEmptyLabelmap()
        }
      }
    },
    async handleUpdateMaskAnnoData(lesionId) {
      let finalLesionId;
      if (typeof lesionId === "number") {
        // 切换左侧病灶
        finalLesionId = lesionId;
      } else {
        const isBeforePageUnload = lesionId.type === "beforeunload";
        const selectedLesionId = LeftHooks.leftHooksData.currentIndex;
        if (!selectedLesionId) {
          // 点击保存按钮需要提示报错，刷新或关闭页面无需任何提示
          return isBeforePageUnload ? false : ElMessage.warning("请先选择一个病灶"); // lesionId.type === 'click'
        } else {
          if (isBeforePageUnload) {
            const { id, isSave } = SyncBrushTool.thePreviousLesion;
            if (isSave) return false; // 说明保存过了
          }
          finalLesionId = Number(selectedLesionId);
        }
      }
      // const toUpdateLesionMasks = SyncBrushTool.toUpdateLesionMasks
      // console.log('保存吧', finalLesionId, SyncBrushTool.thePreviousLesion, toUpdateLesionMasks)
      // if (!finalLesionId || !Array.isArray(toUpdateLesionMasks) || !toUpdateLesionMasks.length) return false
      // const { lesionEvent, seriesEvent } = useUtils();
      //get buffer to api
      //todo save all lesion buffer
      const toUpdatedLesion = this.getActiveLesionPixelD();
      if(toUpdatedLesion.length == 0){
        ElMessage.warning('病灶无涂抹数据，请删除或涂抹')
        //选中当前病灶，防止已经切换到其他病灶
        // LeftHooks.leftHooksData.currentIndex = lesionId
        return
      }
      await updateMaskAnnoData({
        alrId: finalLesionId,
        layerResultList: toUpdatedLesion,
      });
      //todo segment update
      this.lesionEvent.lesionUpdate(finalLesionId, { result: toUpdatedLesion });
      !!SyncBrushTool.thePreviousLesion.id &&
        (SyncBrushTool.thePreviousLesion.isSave = true); // 保存成功了重置回去
      ElMessage.success("编辑病灶成功");
      this.isSaveVisible = false;
    },
    initToolConfig() {
      segConfig.fillAlpha = 0.5;
      segConfig.fillAlphaInactive = 0.5;
      segConfig.outlineAlpha = 0.95;
      segConfig.outlineAlphaInactive = 0;
      segConfig.renderOutline = true;
      /*cornerstoneTools.init({
                showSVGCursors: true,
              })*/
      cornerstoneTools.toolStyle.setToolWidth(2);
      cornerstoneTools.toolColors.setToolColor("rgb(255, 255, 0)");
      cornerstoneTools.toolColors.setActiveColor("rgb(0, 255, 0)");
      cornerstoneTools.store.state.touchProximity = 40;
    },
    async initMpr() {
      this.initToolConfig();
      const images = await Promise.all(
        this.imageIds.map((imageId) => cornerstone.loadAndCacheImage(imageId))
      );
      filmRead.loading = false;
      console.log("dicom loaded");
      const { axialBox, sagittalBox, coronalBox, mprBoxs } = this;
      const {
        sagittalImageIds,
        coronalImageIds,
      } = cornerstoneSideImageLoader.generateSideImages(images); // 组建其他两面数据
      await axialBox.hangIds(this.imageIds, 2); //横
      await sagittalBox.hangIds(sagittalImageIds, 1); //冠
      await coronalBox.hangIds(coronalImageIds, 0); //矢
      this.sagittalImageIds = sagittalImageIds;
      this.coronalImageIds = coronalImageIds;
      this.axialImageIds = this.imageIds;
      // 冠和矢状位挂中间层
      // sagittalBox.scrollToIndex(Math.floor(sagittalImageIds.length / 2) - 1)
      // coronalBox.scrollToIndex(Math.floor(coronalImageIds.length / 2) - 1)
      //数据有了再执行
      setTimeout(() => {
        this.initNodesMask();
        this.initCuboidMask();
        mprBoxs.map((it) => it.updateImage());
      }, 200);
    },
    getImageTag(tagId) {
      const image = cornerstone.getImage(this.axialBox.element);
      const { data } = image;
      if (!_get(data, "elements")) return "";
      try {
        const { length } = data.elements[tagId] || {};
        return length ? data.intString(tagId) : "";
      } catch (error) {}
    },
    setDefaultInfo() {
      [this.defaultWl, this.defaultWw] = [
        this.getImageTag(`x00281050`),
        this.getImageTag(`x00281051`),
      ]; // 片子默认的窗宽窗位
      const defaultWindow = filmRead.interfaceData.pageSettingList.defaultWindow;
      if(defaultWindow !== '' && defaultWindow.includes("*")){
        [this.defaultWl, this.defaultWw] = defaultWindow.split("*");
      }
      this.handleCtWindowChange(`${this.defaultWl}*${this.defaultWw}`); //根据配置设置默认wl
      this.cornerInfo = {
        // total: imageIds.length,
        sliceThickness: this.getImageTag("x00180050"),
        kvp: this.getImageTag("x00180060"),
        xRayTubeCurrent: this.getImageTag("x00181151"),
        wl: this.defaultWl,
        ww: this.defaultWw,
      };
    },
    clearAllToolstate(){
      this.mprBoxs.map(( it ) => cornerstoneTools.globalImageIdSpecificToolStateManager.clear(it.element));
    },
    // 添加长方体
    initCuboidMask() {
      this.clearAllToolstate()
      // if (this.cuboidMaskAdded) return;
      //初始化设置fillstyle为空
      const { configuration: rectConfig } = cornerstoneTools.getModule("Rectangle");
      rectConfig.fillStyle = "transparent";
      rectConfig.activeColor = "rgba(255,255,0,1)";
      const cuMasks = this.allLesionResult.filter((it) => it.tool === "CUBOID");
      if (!Array.isArray(cuMasks) || cuMasks.length === 0) return;
      const { axialBox, sagittalBox, coronalBox, mprBoxs } = this;
      if (!axialBox) return;
      if (!this.isEnable(axialBox.element)) return;
      const stackToolDataSource = getToolState(axialBox.element, "stack");
      if (stackToolDataSource === undefined) {
        return;
      }
      const stackData = stackToolDataSource.data[0];
      const baseImageId = stackData.imageIds[0];
      const { rows, columns } = cornerstone.metaData.get("imagePlaneModule", baseImageId);
      
      const height = stackData.imageIds.length;
      const color = "rgba(0,206,209,1)";
      for (let i = 0, j = cuMasks.length; i < j; i++) {
        const { id, result: cuData } = cuMasks[i];
        if (!cuData) continue;
        const {
          data: { point1: p1_3d, point2: p2_3d },
        } = cuData;
        //计算三个面的平面坐标添加矩形框
        //axialBox
        this.addOneCuboid(id, color, stackData.imageIds, p1_3d, p2_3d);
        //其他两面的映射 sagittalBox
        const p1_3d_sagittal = this.pivotImagePoint(p1_3d, columns, "axial", "sagittal");
        const p2_3d_sagittal = this.pivotImagePoint(p2_3d, columns, "axial", "sagittal");
        this.addOneCuboid(
          id,
          color,
          this.sagittalImageIds,
          p1_3d_sagittal,
          p2_3d_sagittal
        );
        //coronalBox
        const p1_3d_coronal = this.pivotImagePoint(p1_3d, columns, "axial", "coronal");
        const p2_3d_coronal = this.pivotImagePoint(p2_3d, columns, "axial", "coronal");
        this.addOneCuboid(id, color, this.coronalImageIds, p1_3d_coronal, p2_3d_coronal);
      }
      this.cuboidMaskAdded = true;
    },
    addOneCuboid(id, color, imageIds, p1_3d, p2_3d) {
      const z1z2 = [Math.floor(p1_3d.z), Math.floor(p2_3d.z)];
      const z1 = Math.min(...z1z2);
      const z2 = Math.max(...z1z2);
      const layerImageIds = imageIds.slice(z1, z2);
      const item = { uuid: id, color };
      this.addCuboidToolState(item, layerImageIds, p1_3d, p2_3d);
    },
    createRectangleItem(item, p1, p2) {
      const { uuid, color, fillStyle } = item;
      return {
        uuid: uuid || "new",
        visible: true,
        selected: false,
        active: false,
        color,
        fillStyle,
        invalidated: true,
        handles: {
          start: {
            x: p1.x,
            y: p1.y,
            highlight: true,
            active: false,
          },
          end: {
            x: p2.x,
            y: p2.y,
            highlight: true,
            active: false,
          },
          initialRotation: 0,
          textBox: {
            active: false,
            hasMoved: false,
            movesIndependently: false,
            drawnIndependently: true,
            allowedOutsideImage: true,
            hasBoundingBox: true,
          },
        },
      };
    },
    //添加长方体某一方向的映射
    addCuboidToolState(item, layerImageIds, p1, p2) {
      const {
        addImageIdToolState,
        getImageIdToolState,
        toolState,
      } = cornerstoneTools.globalImageIdSpecificToolStateManager;
      // cornerstoneTools.setToolPassive('Rectangle'); //
      cornerstoneTools.setToolEnabled("Rectangle"); //
      let itemData = {};
      for (let id of layerImageIds) {
        itemData = this.createRectangleItem(item, p1, p2);
        addImageIdToolState(id, "Rectangle", itemData); //cornerstoneTools.addToolState(this.axialBox.element, 'Rectangle',itemData)
      }
      // console.log(cornerstoneTools.getToolState(this.axialBox.element, 'Rectangle'))
      // console.log('toolState',toolState)
      // console.log(cornerstoneTools.getElementToolStateManager(this.axialBox.element))
    },
    //删除三个面的某一id
    removeOneCuboid(uuid, toolName) {
      const { toolState } = cornerstoneTools.globalImageIdSpecificToolStateManager;
      for (const imageId in toolState) {
        let { data } = toolState[imageId][toolName];
        for (let i = data.length - 1; i >= 0; i--) {
          if (data[i].uuid === uuid) {
            data.splice(i, 1);
          }
        }
      }
    },
    //显示、隐藏三个面
    setOneCuboidVisible(uuid, visible, toolName) {
      const { toolState } = cornerstoneTools.globalImageIdSpecificToolStateManager;
      const isAll = uuid == null ? true : false;
      for (const imageId in toolState) {
        let { data } = toolState[imageId][toolName];
        for (let i = data.length - 1; i >= 0; i--) {
          if (isAll || data[i].uuid === uuid) {
            data[i].visible = visible;
          }
        }
      }
    },
    //选中和反选长方体
    // uuid=null:全部;
    selectOneCuboid(uuid, isSelected, toolName) {
      const { toolState } = cornerstoneTools.globalImageIdSpecificToolStateManager;
      const isAll = uuid == null ? true : false;
      for (const imageId in toolState) {
        let { data } = toolState[imageId][toolName];
        for (let i = data.length - 1; i >= 0; i--) {
          if (isAll || data[i].uuid === uuid) {
            //全选或者选中
            data[i].selected = isSelected;
          } else {
            if (isSelected) {
              data[i].selected = !isSelected;
            }
          }
        }
      }
    },
    clearAllSegments(){
      this.mprBoxs.map((item) => {
        const { labelmaps3D } = getters.labelmaps3D(item.element);
        // setters.deleteSegment
        labelmaps3D && labelmaps3D.map((it) => {
          it.labelmaps2D = []
        });
      });
    },
    //添加segment mask
    initNodesMask() {
      //每次先清空
      this.clearAllSegments()
      // if (this.nodeMaskAdded) return;
      const start = new Date().getTime();
      console.log("start", start);
      if (segConfig.alwaysEraseOnClick === true || !this.isShowAllLesion) return;
      const nodeMasks = this.allLesionResult.filter(
        (it) => it.tool === "FREEHAND_DAUBER"
      );
      if (!Array.isArray(nodeMasks) || nodeMasks.length === 0) return;
      const { axialBox, sagittalBox, coronalBox, mprBoxs } = this;
      if (!axialBox) return;
      // if (!this.isEnable(axialBox.element)) return
      const stackToolDataSource = getToolState(axialBox.element, "stack");
      if (stackToolDataSource === undefined) {
        return;
      }
      const stackData = stackToolDataSource.data[0];
      const baseImageId = stackData.imageIds[0];
      const { rows, columns } = cornerstone.metaData.get("imagePlaneModule", baseImageId);
      const height = stackData.imageIds.length;

      for (let i = 0, j = nodeMasks.length; i < j; i++) {
        const { id, result, resultDetailMap } = nodeMasks[i];
        if (!result) continue;
        const maskList = result;
        if (!maskList || !maskList.length) continue;
        // console.log('new buff start', i, (new Date().getTime() - start) / 1000)
        const buffer = new ArrayBuffer(rows * columns * this.imageIds.length * 2);
        const uintBuf = new Uint16Array(buffer);
        // console.log('for start', i, (new Date().getTime() - start) / 1000)
        const cr = i + 1;
        const segmentsOnLabelmapArray = []; //new Array(height).fill([0, cr])
        for (let n = 0; n < maskList.length; n++) {
          const { layer, result } = maskList[n];
          const pointIndexList = JSON.parse(result);
          const cl = rows * columns * layer;
          //set segment state,transfer maskList to buffer
          pointIndexList.forEach((item) => {
            const x = item % columns;
            const y = Math.ceil(item / columns);
            const offset = cl + columns * (y - 1) + x;
            // const offset = layer * rows * columns + item
            uintBuf[offset] = cr;
          });
          //
          segmentsOnLabelmapArray[layer] = [0, cr];
        }
        // console.log('set labelmap start', i, (new Date().getTime() - start) / 1000)
        //set buffer
        setters.labelmap3DForElement(
          axialBox.element,
          buffer,
          i,
          [],
          segmentsOnLabelmapArray, //important
          0
        );
        console.log(i, "one", (new Date().getTime() - start) / 1000);
        // 其他两面的映射 sagittalBox
        const buffer1 = new ArrayBuffer(rows * columns * this.imageIds.length * 2);
        const uintBuf1 = new Uint16Array(buffer1);
        const segmentsOnLabelmapArray1 = []; //new Array(columns).fill([0, cr])
        for (let n = 0; n < maskList.length; n++) {
          const { layer, result } = maskList[n];
          const pointIndexList = JSON.parse(result);
          //set segment state,transfer maskList to buffer
          pointIndexList.forEach((item) => {
            /*x: point.y,
                                y: sourceImageIdIndex,
                                z: columns - point.x,*/
            const x = item % columns;
            const y = Math.ceil(item / columns);
            const z = layer;
            const xx = y;
            const yy = z + 1;
            const zz = columns - x - 1;
            const offset = height * rows * zz + rows * (yy - 1) + xx;
            uintBuf1[offset] = cr;
            segmentsOnLabelmapArray1[zz] = [0, cr];
          });
        }
        //set buffer
        setters.labelmap3DForElement(
          sagittalBox.element,
          buffer1,
          i,
          [],
          segmentsOnLabelmapArray1, //important
          0
        );
        // console.log(i, 'two', (new Date().getTime() - start) / 1000)
        //coronalBox
        const buffer2 = new ArrayBuffer(rows * columns * this.imageIds.length * 2);
        const uintBuf2 = new Uint16Array(buffer2);
        const segmentsOnLabelmapArray2 = []; //new Array(rows).fill([0, cr])
        for (let n = 0; n < maskList.length; n++) {
          const { layer, result } = maskList[n];
          const pointIndexList = JSON.parse(result);
          //set segment state,transfer maskList to buffer
          pointIndexList.forEach((item) => {
            /*x: point.x,
                                y: sourceImageIdIndex,
                                z: point.y,*/
            const x = item % columns;
            const y = Math.ceil(item / columns);
            const z = layer;
            const xx = x;
            const yy = z + 1;
            const zz = y;
            const offset = height * columns * zz + columns * (yy - 1) + xx;
            uintBuf2[offset] = cr;
            segmentsOnLabelmapArray2[zz] = [0, cr];
          });
        }
        //set buffer
        setters.labelmap3DForElement(
          coronalBox.element,
          buffer2,
          i,
          [],
          segmentsOnLabelmapArray2, //important
          0
        );
        //set uuid
        mprBoxs.map((item) => {
          const labelmap3D = getters.labelmap3D(item.element, i);
          labelmap3D.uuid = id;
          labelmap3D.activeSegmentIndex = cr;
        });
        console.log(i, "three", (new Date().getTime() - start) / 1000);
      }
      this.nodeMaskAdded = true;
      this.activeEmptyLabelmap();
    },
    //反选的逻辑
    activeEmptyLabelmap() {
      const maxIndex = this.getEmptyLabelmapIndex();
      this.mprBoxs.map((item) => {
        //都不选中
        setters.activeLabelmapIndex(item.element, maxIndex - 1);
        setters.activeSegmentIndex(item.element, maxIndex);
        item.updateImage();
      });
    },
    //unused 获取最大index of 3d
    getMaxLabelmapIndex() {
      const { labelmaps3D } = getters.labelmaps3D(this.axialBox.element);
      let max = 0;
      labelmaps3D.map((it, index) => {
        max = max > it.activeSegmentIndex ? max : it.activeSegmentIndex;
      });
      return max;
    },
    //get empty 3d index
    getEmptyLabelmapIndex() {
      const { labelmaps3D } = getters.labelmaps3D(this.axialBox.element);
      let emptyIndex = 0;
      if(labelmaps3D == undefined) return emptyIndex
      const lm = labelmaps3D[labelmaps3D.length - 1]; //最后一个,todo是否精确
      if (lm.uuid) {
        //是否对应结节
        emptyIndex = lm.activeSegmentIndex + 1;
      } else {
        emptyIndex = lm.activeSegmentIndex;
      }
      return emptyIndex;
    },
    //get 3d by id
    getLabelmapIndexById(uuid) {
      const { labelmaps3D } = getters.labelmaps3D(this.axialBox.element);
      let labelmap = labelmaps3D.find((it) => it.uuid == uuid);
      return labelmap.activeSegmentIndex; //当splice时下标变化
    },
    //get current 3d pixel index
    getActiveLesionPixelD() {
      const {
        labelmap2D,
        labelmap3D,
        activeLabelmapIndex,
        currentImageIdIndex,
      } = getters.labelmap2D(this.axialBox.element);
      let toUpdatedLesion = [];
      if (activeLabelmapIndex > -1) {
        labelmap3D.labelmaps2D.forEach((item, index) => {
          let layerItem = { layer: index, result: [] };
          item.pixelData.forEach((it, index) => {
            it > 0 && layerItem.result.push(index);
          });
          if (layerItem.result.length > 0) {
            //防止有空的
            toUpdatedLesion.push(layerItem);
          }
        });
      }
      console.log("toUpdatedLesion", toUpdatedLesion);
      return toUpdatedLesion;
    },
    isEnable(element) {
      return cornerstone
        .getEnabledElements()
        .map((item) => {
          return item.element;
        })
        .includes(element);
    },
    //show or hide
    toggleSegmentVisibility(segmentIndex, labelmapIndex) {
      const { mprBoxs } = this;
      mprBoxs.map((item) => {
        setters.toggleSegmentVisibility(item.element, segmentIndex, labelmapIndex);
        item.updateImage();
      });
    },
    scrollToMid(p1, p2) {
      const mid_z = Math.floor((p1.z + p2.z) / 2);
      const mid_x = Math.floor((p1.x + p2.x) / 2);
      const mid_y = Math.floor((p1.y + p2.y) / 2);
      //十字线对齐
      this.axialBox.scrollToIndex(mid_z);
      this.sagittalBox.scrollToIndex(this.sagittalImageIds.length - mid_x);
      this.coronalBox.scrollToIndex(mid_y);
    },
    pivotImagePoint(p_3d, columns, originView = "axial", targetView = "sagittal") {
      if (originView === "axial" && targetView === "sagittal") {
        return {
          x: p_3d.y,
          y: p_3d.z,
          z: columns - p_3d.x,
        };
      } else if (originView === "axial" && targetView === "coronal") {
        return {
          x: p_3d.x,
          y: p_3d.z,
          z: p_3d.y,
        };
      } else if (originView === "sagittal" && targetView === "axial") {
        return {
          x: columns - p_3d.z,
          y: p_3d.x,
          z: p_3d.y,
        };
      } else if (originView === "sagittal" && targetView === "coronal") {
        return {
          x: columns - p_3d.z,
          y: p_3d.y,
          z: p_3d.x,
        };
      } else if (originView === "coronal" && targetView === "axial") {
        //todo 有问题
        return {
          x: p_3d.x,
          y: p_3d.z,
          z: p_3d.y,
          // z: columns - p_3d.y,
        };
      } else if (originView === "coronal" && targetView === "sagittal") {
        //todo 有问题
        return {
          x: p_3d.z,
          y: p_3d.y,
          z: columns - p_3d.x,
          // z: p_3d.x,
        };
      }

      return p_3d;
    },
    offBusEvent() {
      Bus.off("toolBarClick", this.handleToolBarClick);
      Bus.off("lesionClick", this.handleLesionClick);
    }
  },
  beforeDestory(){
    console.log('mpr 销毁')
    this.offBusEvent()
  }
};
</script>

<style lang="less" scoped>
.content {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  background-color: #000;
  padding: 8px 8px 0;
  position: relative;

  .mpr-wrapper {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  // .axial-image-wrapper {
  //   width: 50%;
  //   height: 100%;
  // }
  // .sagittal-image-wrapper, .coronal-image-wrapper {
  //   height: 50%;
  // }
  // 位置条
  &-mouse-positon {
    width: 200px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    position: absolute;
    left: 8px;
    top: 8px;
    background-color: rgba(40, 49, 66, 0.6);
    border-radius: 4px;
    z-index: 1;
    color: #fff;
  }

  // 倍率条
  &-multiplying-bar {
    width: 44px;
    height: 284px;
    background-color: rgba(40, 49, 66, 0.6);
    border-radius: 4px;
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 12px 5px 0;
    z-index: 1;

    &-title {
      font-family: "HYQiHei";
      font-style: normal;
      font-weight: 600;
      font-size: 18px;
      color: #70e2f0;
      margin-bottom: 12px;
      text-align: center;
    }

    &-list {
      &-item {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1px solid #fff;
        font-family: "HYQiHei";
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 32px;
        text-align: center;
        color: #fff;
        margin-bottom: 8px;
        user-select: none;
      }

      &-item:nth-of-type(1) {
        color: rgba(255, 174, 224, 0.8);
        border-color: rgba(255, 174, 224, 0.8);
      }

      &-item:nth-of-type(2) {
        color: rgba(255, 185, 255, 0.8);
        border-color: rgba(255, 185, 255, 0.8);
      }

      &-item:nth-of-type(3) {
        color: rgba(229, 201, 255, 0.8);
        border-color: rgba(229, 201, 255, 0.8);
      }

      &-item:nth-of-type(4) {
        color: rgba(202, 215, 255, 0.8);
        border-color: rgba(202, 215, 255, 0.8);
      }

      &-item:nth-of-type(5) {
        color: rgba(153, 240, 255, 0.8);
        border-color: rgba(153, 240, 255, 0.8);
      }

      &-item:nth-of-type(6) {
        color: rgba(112, 226, 240, 0.8);
        border-color: rgba(112, 226, 240, 0.8);
      }

      &-item:hover {
        cursor: pointer;
      }

      &-item:nth-of-type(1):hover {
        background-color: rgba(255, 174, 224, 0.2);
      }

      &-item:nth-of-type(2):hover {
        background-color: rgba(255, 185, 255, 0.2);
      }

      &-item:nth-of-type(3):hover {
        background-color: rgba(229, 201, 255, 0.2);
      }

      &-item:nth-of-type(4):hover {
        background-color: rgba(202, 215, 255, 0.2);
      }

      &-item:nth-of-type(5):hover {
        background-color: rgba(153, 240, 255, 0.2);
      }

      &-item:nth-of-type(6):hover {
        background-color: rgba(112, 226, 240, 0.2);
      }
    }
  }

  &-viewer-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  &-thumbnail {
    width: 200px;
    height: 200px;
    border: 4px solid rgba(40, 49, 66, 0.6);
    position: absolute;
    left: 8px;
    bottom: 8px;
    background-color: #f5f5f5;
  }
}
</style>

<style lang="less">
.save-lesion-modal {
  background-color: #272727;

  .arco-modal-header {
    height: 64px;
    background-color: #393a3c;
    font-family: "Microsoft YaHei";
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    border: 0;

    .arco-modal-title,
    .arco-modal-close-btn {
      font-family: "Microsoft YaHei";
      font-style: normal;
      font-weight: 700;
      font-size: 18px;
      color: #fff;
    }

    .arco-icon-hover:hover::before {
      background-color: #616367;
    }
  }

  .arco-modal-body {
    .radio-title {
      font-family: "Microsoft YaHei";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      color: #fff;
      margin-bottom: 18px;
      text-align: left;
    }

    .radio-group {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .arco-radio-group {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;

        .radio-group-item {
          margin-bottom: 12px;

          .arco-radio-label {
            white-space: nowrap;
          }
        }
      }

      .arco-radio-icon {
        width: 12px;
        height: 12px;
        line-height: 12px;
        border: 1px solid rgba(255, 255, 255, 0.7);
      }

      .arco-radio-icon::after {
        background-color: transparent;
      }

      .arco-radio:hover .arco-radio-icon {
        border-color: #67c9d5;
      }

      .arco-radio:hover .arco-radio-icon-hover::before {
        background-color: transparent;
      }

      .arco-radio-checked .arco-radio-icon {
        border: 1px solid #67c9d5;
        background-color: transparent;
      }

      .arco-radio-checked .arco-radio-icon::after {
        background-color: #67c9d5;
      }

      &-item {
        font-family: "Microsoft YaHei";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        color: #ccc;

        .arco-radio-label {
          color: #ccc;
        }
      }
    }

    .other-container {
      margin: 4px 0 20px;
      width: 100%;
      height: 32px;

      .arco-textarea-wrapper {
        background-color: transparent;
        border: 1px solid rgba(255, 255, 255, 0.7);
        color: #fff;
      }
    }

    .submit-tip {
      font-family: "Microsoft YaHei";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      text-align: center;
      color: #ccc;
    }

    .sumbit-body {
      font-family: "Microsoft YaHei";
      font-style: normal;
      font-weight: 400;
      font-size: 22px;
      text-align: center;
      color: #fff;
      margin-bottom: 36px;

      .icon-bingzaotishi {
        margin-right: 5px;
        vertical-align: text-bottom;
        color: #ff7d00;
      }
    }

    .bottom-btn {
      button {
        width: 96px;
        height: 40px;
        background-color: #448e97;
        border-radius: 4px;
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        color: #fff;
        border: none;

        &:first-child {
          background-color: #353535;
          font-family: "PingFang SC";
          font-weight: 400;
          font-size: 16px;
          color: rgba(255, 255, 255, 0.7);
        }

        &:not(:first-child) {
          margin-left: 20px;
        }
      }

      .arco-btn-primary:hover,
      .arco-btn-primary[type="button"]:hover {
        background-color: #67c9d5;
      }
    }
  }

  .arco-modal-footer {
    text-align: center;
    border: 0;

    .arco-btn {
      width: 128px;
      height: 40px;
      font-family: "PingFang SC";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      border-radius: 4px;
    }

    .arco-btn-secondary {
      color: rgba(255, 255, 255, 0.7);
      background-color: #353535;
    }

    .arco-btn-primary {
      background-color: #448e97;
      border-color: #448e97;
    }

    .arco-btn-primary:hover,
    .arco-btn-primary[type="button"]:hover {
      background-color: #67c9d5;
      border-color: #67c9d5;
    }
  }
}
</style>
